<template>
  <Modal :value="showModal" title="新增商品" @on-cancel="closeModal" :footer-hide="true">
    <Form ref="JForm" :model="formData" :rules="rules">
      <FormItem prop="name" label="商品名称">
        <Input v-model="formData.name" placeholder="请输入商品名称"></Input>
      </FormItem>
      <FormItem prop="type" label="商品类别">
        <Select v-model="formData.type" placeholder="请选择商品类别" :clearable="true">
          <Option v-for="item in typeInfo" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem prop="sum" label="商品库存">
        <div class="m-formitem">
          <InputNumber :min="0" :active-change="false" :controls-outside="true" v-model="formData.sum"></InputNumber>
        </div>
      </FormItem>
      <FormItem prop="unit" label="商品单位">
        <Select v-model="formData.unit" placeholder="请选择商品单位" :clearable="true">
          <Option v-for="item in unitInfo" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem prop="price" label="商品价格">
        <div class="m-formitem">
          <InputNumber
            :min="0"
            :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\$\s?|(,*)/g, '')"
            :precision="2"
            :active-change="false"
            :controls-outside="true"
            v-model="formData.price"
          ></InputNumber>
        </div>
      </FormItem>
      <FormItem prop="preferential" label="">
        <Checkbox v-model="formData.preferential">是否优惠</Checkbox>
      </FormItem>
      <FormItem v-if="formData.preferential == true" prop="preferentialPrice" label="商品优惠后价格">
        <div class="m-formitem">
          <InputNumber
            :min="0"
            :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\$\s?|(,*)/g, '')"
            :precision="2"
            :active-change="false"
            :controls-outside="true"
            v-model="formData.preferentialPrice"
          ></InputNumber>
        </div>
      </FormItem>
      <FormItem>
        <Upload ref="upload" action="//127.0.0.1:8000/pic" name="pic" :on-success="setFile" :show-upload-list="false">
          <Button :loading="loadingStatus">{{ loadingStatus ? '上传中' : upfile }}</Button>
        </Upload>
      </FormItem>
      <div>{{ file.name }}</div>
      <Button type="primary" @click="addGoods">新增</Button>
    </Form>
  </Modal>
</template>

<script>
import { mapActions } from 'vuex'
import { addRules } from '../js/rules'
export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formData: {
        sum: 0,
        price: 0,
        preferential: false
      },
      rules: addRules(this),
      file: {
        id: 2,
        name: ''
      },  // 商品图片
      loadingStatus: false,  // 是否在上传中
      upfile: '选择上传商品图片',  // 上传图片按钮的text
      unitInfo: [],   // 商品单位数据
      typeInfo: [],   // 商品类别数据
    }
  },
  mounted () {
    this._getUnitInfo()
    this._getTypeInfo()
  },
  methods: {
    // 上传图片
    // 返回图片id
    setFile (response) {
      this.loadingStatus = true;
      setTimeout(() => {
        this.file = {
          id: response.pic.id,
          name: response.pic.name,
        }
        this.loadingStatus = false;
        this.upfile = '已上传';
        this.$Message.success('上传成功')
      }, 500);
    },
    // 新增商品
    addGoods () {
      this.$refs.JForm.validate((valid) => {
        if (valid) {
          this._addGoods()
          this.closeModal()
          this.$emit('reloadTable')
        }
      })
    },
    // 关闭页面
    closeModal () {
      this.formData = {
        sum: 0,
        price: 0,
        preferential: false
      }
      this.file = {
        id: 2,
        name: ''
      }
      this.upfile = "选择上传商品图片"
      this.$emit('closeModal')
    },
    // 添加商品接口
    async _addGoods () {
      const url = 'addgoods'
      const res = await this.GET_DATA({
        dataUrl: url,
        picture: this.file.id,
        ...this.formData
      })
      if (res) {
        res.code === '0000' && this.$Message.success('操作成功')
      }
    },
    // 获取商品单位接口
    async _getUnitInfo () {
      const url = 'goods/unitinfo'
      const res = await this.GET_DATA({
        dataUrl: url
      })
      if (res) {
        this.$nextTick(() => {
          this.unitInfo = res.data.unitList
        })
      }
    },
    // 获取商品类别接口
    async _getTypeInfo () {
      const url = 'goods/typesinfo'
      const res = await this.GET_DATA({
        dataUrl: url
      })
      if (res) {
        this.$nextTick(() => {
          this.typeInfo = res.data.typeInfo
        })
      }
    },
    ...mapActions({
      GET_DATA: 'GET_DATA'
    })
  }
}
</script>

<style lang="scss">
// .m-formitem {
//   width: 40%;
// }
</style>